{% load dajaxice_templatetags %}
{% load staticfiles %}
<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
	<head>
		<meta charset="utf-8">
		<title>Login to site</title>
		<meta name="description" content="">
		<meta name="author" content="Ilya-Dorman" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

		<link rel="stylesheet" href="{% static 'social/css/normalize.css' %}">
		<link rel="stylesheet" href="{% static 'social/css/font-face.css' %}">
		<link rel="stylesheet" href="{% static 'social/css/color-schemes/dark/hot-pink.css' %}">
		<link rel="stylesheet" href="{% static 'social/css/typography.css' %}">
		<link rel="stylesheet" href="{% static 'social/css/font-awesome.css' %}">
		<link rel="stylesheet" href="{% static 'social/css/main.css' %}">
		<style>
			body{
				
			}
			.border,
			.rain{
				height: 300px;
				width: 450px;
			}
			/* Layout with mask */
			.rain{
				 padding: 10px 12px 12px 10px;
				 -moz-box-shadow: 10px 10px 10px rgba(0,0,0,1) inset, -9px -9px 8px rgba(0,0,0,1) inset;
				 -webkit-box-shadow: 8px 8px 8px rgba(0,0,0,1) inset, -9px -9px 8px rgba(0,0,0,1) inset;
				 box-shadow: 8px 8px 8px rgba(0,0,0,1) inset, -9px -9px 8px rgba(0,0,0,1) inset;
				 margin: 100px auto;
			}
			/* Artifical "border" to clear border to bypass mask */
			.border{
				padding: 1px;
				-moz-border-radius: 5px;
			    -webkit-border-radius: 5px;
				border-radius: 5px;
			}

			.border,
			.rain,
			.border.start,
			.rain.start{
				background-repeat: repeat-x, repeat-x, repeat-x, repeat-x;
				background-position: 0 0, 0 0, 0 0, 0 0;
				/* Blue-ish Green Fallback for Mozilla */
				background-image: -moz-linear-gradient(left, #09BA5E 0%, #00C7CE 15%, #3472CF 26%, #00C7CE 48%, #0CCF91 91%, #09BA5E 100%);
				/* Add "Highlight" Texture to the Animation */
				background-image: -webkit-gradient(linear, left top, right top, color-stop(1%,rgba(0,0,0,.3)), color-stop(23%,rgba(0,0,0,.1)), color-stop(40%,rgba(255,231,87,.1)), color-stop(61%,rgba(255,231,87,.2)), color-stop(70%,rgba(255,231,87,.1)), color-stop(80%,rgba(0,0,0,.1)), color-stop(100%,rgba(0,0,0,.25)));
				/* Starting Color */
				background-color: #39f;
				/* Just do something for IE-suck */
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00BA1B', endColorstr='#00BA1B',GradientType=1 );
			}
			
			/* Non-keyframe fallback animation */
			.border.end,
			.rain.end{
				-moz-transition-property: background-position;  
				-moz-transition-duration: 30s;
				-moz-transition-timing-function: linear;
				-webkit-transition-property: background-position;  
				-webkit-transition-duration: 30s;  
				-webkit-transition-timing-function: linear;
				-o-transition-property: background-position;  
				-o-transition-duration: 30s;  
				-o-transition-timing-function: linear;
				transition-property: background-position;  
				transition-duration: 30s;  
				transition-timing-function: linear;
				background-position: -5400px 0, -4600px 0, -3800px 0, -3000px 0;	
			}
			
			/* Keyfram-licious animation */
			@-webkit-keyframes colors {
			    0% {background-color: #39f;}
			    15% {background-color: #F246C9;}
			    30% {background-color: #4453F2;}
			    45% {background-color: #44F262;}
			    60% {background-color: #F257D4;}
			    75% {background-color: #EDF255;}
			    90% {background-color: #F20006;}
			    100% {background-color: #39f;}
		    }
		    .border,.rain{
			    -webkit-animation-direction: normal;
			    -webkit-animation-duration: 20s;
			    -webkit-animation-iteration-count: infinite;
			    -webkit-animation-name: colors;
			    -webkit-animation-timing-function: ease;
		    }
		    
		    /* In-Active State Style */
			.border.unfocus{
				background: #333 !important;	
				 -moz-box-shadow: 0px 0px 15px rgba(255,255,255,.2);
				 -webkit-box-shadow: 0px 0px 15px rgba(255,255,255,.2);
				 box-shadow: 0px 0px 15px rgba(255,255,255,.2);
				 -webkit-animation-name: none;
			}
			.rain.unfocus{
				background: #000 !important;	
				-webkit-animation-name: none;
			}
			
			/* Regular Form Styles */
			form{
				background: #212121;
				-moz-border-radius: 5px;
				-webkit-border-radius: 5px;
			    border-radius: 5px;
				height: 100%;
				width: 100%;
				background: -moz-radial-gradient(50% 46% 90deg,circle closest-corner, #242424, #090909);
				background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 150, from(#242424), to(#090909));
			}
			form label{
				display: block;
				padding: 10px 10px 5px 15px;
				font-size: 11px;
				color: #777;
			}
			form input{
                opacity: 0.5;
				display: block;
				margin: 5px 10px 10px 15px;
				width: 85%;
				background: #122171;

			}
			form input:focus{
				outline: 1px solid #555;
				color: #FFF;
			}
			input[type="submit"]{
                opacity: 1;
				color: #4c89ff;
				padding: 5px 10px;
				float: right;
				margin: 20px 0;
				border: 1px solid #000;
			}
		</style>

		<script>
			document.cookie='resolution='+Math.max(screen.width,screen.height)+("devicePixelRatio" in window ? ","+devicePixelRatio : ",1")+'; path=/';
		</script>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
		<script>
		$(function(){
		  var $form_inputs =   $('form input');
		  var $rainbow_and_border = $('.rain, .border');
		  /* Used to provide loping animations in fallback mode */
		  $form_inputs.bind('focus', function(){
		  	$rainbow_and_border.addClass('end').removeClass('unfocus start');
		  });
		  $form_inputs.bind('blur', function(){
		  	$rainbow_and_border.addClass('unfocus start').removeClass('end');
		  });
		  $form_inputs.first().delay(800).queue(function() {
			$(this).focus();
		  });
		});
		</script>
        {% dajaxice_js_import %}
	</head>
	<body>
		<!--[if lt IE 7]>
			<p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better experience this site.</p>
		<![endif]-->


			<div class="top-ribbon"></div>
			<div class="home"><a href="/"><i class="icon-home"></i></a></div>

			<header class="categories-header">
				<h1 class="entry-title-font"><i class="icon-cogs"></i>please enter you login detail below : </h1>
			</header>

			<section class="blog-categories">
				<article class="post-excerpt body-font">
					<div class="rain">
						<div class="border start">
							<form action="/" method="post">
                            {% csrf_token %}
								<label for="email">Email address</label>
								<input name="email" type="text" placeholder="Email@address.com"/>
								<label for="pass">Password</label>
								<input name="pass" type="password" placeholder="Password"/>
                                {% if error %}<label for="pass">{{ error }}</label>{% endif %}
			                                        <input  type="submit" value="LOG IN" style="margin-right:30px;margin-top:80px;"/>
{#                                <input type="button" onclick="Dajaxice.login.dajaxice_example(my_callback)" />#}
							</form>
						</div>
					</div>
				</article>

				
			</section>


		<footer class="site-footer site-footer-font">
			<div class="sparator"></div>
			<div class="contact">
				<a href="mailto:tellus@slt.com"><i class="icon-envelope-alt"></i> tellus@slt.com</a> &middot;
				<a href="http://www.twitter.com"><i class="icon-twitter"></i> @SLT</a> &middot;
				<a href="http://www.facebook.com"><i class="icon-facebook-sign"></i> /slt</a>
			</div>
			
		</footer>


		<script src="js/plugins.js"></script>
		<script src="js/main.js"></script>
        <script src="{% static 'login/js/beta.js' %}"></script>
	</body>
</html>
